<!-- TWO STEPS TO INSTALL MOVE DUAL LIST:
  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Fred P -->
<!-- Begin
// Compare two options within a list by VALUES

function compareOptionValues(a, b) { 
  // Radix 10: for numeric values
  // Radix 36: for alphanumeric values
  var sA = parseInt( a.value, 36 );  
  var sB = parseInt( b.value, 36 );  
  return sA - sB;
}

// Compare two options within a list by TEXT
function compareOptionText(a, b) { 
  // Radix 10: for numeric values
  // Radix 36: for alphanumeric values
  var sA = parseInt( a.text, 36 );  
  var sB = parseInt( b.text, 36 );  
  return sA - sB;
}



// Dual list move function
function moveDualList(srcList, destList, moveAll) {
  // Do nothing if nothing is selected
  if ((srcList.selectedIndex == -1) && (moveAll == false)) {
    return;
  }

  newDestList = new Array(destList.options.length);
  var len = 0;
  for (len = 0; len < destList.options.length; len++ ) {
    if (destList.options[len] != null) {
      newDestList[len] = new Option(destList.options[len].text, 
        destList.options[len].value, destList.options[len].defaultSelected, 
        destList.options[len].selected);
    }
  }

  for (var i = 0; i < srcList.options.length; i++ ) { 
    if (srcList.options[i] != null && 
    (srcList.options[i].selected == true || moveAll)) {
       // Statements to perform if option is selected
       // Incorporate into new list
       newDestList[len] = new Option(srcList.options[i].text, 
         srcList.options[i].value, srcList.options[i].defaultSelected, 
         srcList.options[i].selected);
       len++;
    }
  }

  // Sort out the new destination list
  newDestList.sort( compareOptionValues );   // BY VALUES
  //newDestList.sort( compareOptionText );   // BY TEXT

  // Populate the destination with the items from the new array
  for (var j = 0; j < newDestList.length; j++) {
    if (newDestList[j] != null ) {
      destList.options[j] = newDestList[j];
    }
  }

  // Erase source list selected elements
  for(var i = srcList.options.length - 1; i >= 0; i--) { 
    if (srcList.options[i] != null && 
    (srcList.options[i].selected == true || moveAll)) {
       // Erase Source
       //srcList.options[i].value = "";
       //srcList.options[i].text  = "";
       srcList.options[i]       = null;
    }
  }
} // End of moveDualList()

//  End -->

</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
<BODY>
<div align="center"><center>

<!-- TEST DUAL LIST -->
<form ACTION="" METHOD="POST" name="myForm">
<table border="0">
<tr>
  <td>
    <!-- Multiple Select List with 20 rows size and 70 pixels wide -->
    <!-- Using   for SPACING and alignment -->
    <select multiple size="20" style="width:70" name="listLeft">
      <option value="10">      10 </option>
      <option value="20">      20 </option>
      <option value="30">      30 </option>
      <option value="40">      40 </option>
      <option value="50">      50 </option>
      <option value="A" >       A  </option>
      <option value="B" >       B  </option>
      <option value="F" >       F  </option>
      <option value="X" >       X  </option>
    </select>
  </td>
  <td><NOBR>   
    <input type="button" style="width:90" onclick="moveDualList( this.form.listLeft,  this.form.listRight, false )"  
    name="Add     >>"  value="Add       >>">     <BR>
    <NOBR>       
    <input type="button" style="width:90" onclick="moveDualList( this.form.listRight, this.form.listLeft,  false )"  
    name="Add     <<"  value="Add       <<">     <BR>
    <NOBR>       
    <input type="button" style="width:90" onclick="moveDualList( this.form.listLeft,  this.form.listRight, true  )"  
    name="Add All >>"  value="Add All >>">     <BR>
    <NOBR>       
    <input type="button" style="width:90" onclick="moveDualList( this.form.listRight, this.form.listLeft,  true  )"  
    name="Add All <<"  value="Add All <<">     <BR>
    </NOBR>
  </td>
  <td>
    <select multiple size="20" style="width:70" name="listRight">
      <option value="01">       1  </option>
      <option value="02">       2  </option>
      <option value="03">       3  </option>
      <option value="04">       4  </option>
      <option value="05">       5  </option>
      <option value="D" >       D  </option>
      <option value="G" >       G  </option>
      <option value="K" >       K  </option>
      <option value="Z" >       Z  </option>
      <option value="55">       55  </option>
    </select>
  </td>
</tr>
</table>
</form>
</center></div>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size:  5.98 KB -->